<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>jQuery &bull; Choose</title>
	<style type="text/css">
		body {
			font-family : "Trebuchet MS", Ubuntu;
		}
		ul {
			style-type : none;
		}
		a:visited {
			color : blue;
		}
	</style>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-choose.js"></script>
</head>
<body>
<h1>jQuery Choose : "select" node manipulation</h1>
<ul>
	<li><a id="select-first" href="#">Select First</a></li>
	<li><a id="select-second" href="#">Select the one with text : "Second Option"</a></li>
	<li><a id="select-third" href="#">Select the third and do not trigger "change event"</a></li>
	<li><a id="select-fourth" href="#">Select the fourth and alert "Trololo" </a></li>
</ul>
<select id="my-selection">
	<option value="a">First Option</option>
	<option value="b">Second Option</option>
	<option value="c">Third Option</option>
	<option value="d">Fourth Option</option>
</select>
<script type="text/javascript">

$("#select-first").click(function () {
	$("#my-selection").choose("a");
});

$("#select-second").click(function () {
	$("#my-selection").choose("Second Option", {
		"text"	:	"true"
	});
});

$("#select-third").click(function () {
	$("#my-selection").choose("c", {
		"trigger"	:	"false"
	});
});

$("#select-fourth").click(function () {
	$("#my-selection").choose("d", function () {
		alert ( "Trololo" );
	});
});

$("#my-selection").change(function () {
	$("body").append('<div class="change-indication">Triggered Selection Change!</div>');
	$(".change-indication").last().delay(300).fadeOut(function () {
		$(this).remove();
	});
});

</script>
</body>
</html>